<template>
  <div class="container">
    <navbar title="淘宝拉新明细" theme="light"></navbar>
    <div class="filterbar">
      <text @click="selectStatus" :class="['filterbar-item', searchParam.status === '' && 'filterbar-item-current']"
            status="">所有
      </text>
      <text @click="selectStatus"
            :class="['filterbar-item', searchParam.status === '1' && 'filterbar-item-current']" status="1">已注册
      </text>
      <text @click="selectStatus"
            :class="['filterbar-item', searchParam.status === '2' && 'filterbar-item-current']" status="2">已激活
      </text>
      <text @click="selectStatus"
            :class="['filterbar-item', searchParam.status === '3' && 'filterbar-item-current']" status="3">已首购
      </text>
      <text @click="selectStatus"
            :class="['filterbar-item', searchParam.status === '4' && 'filterbar-item-current']" status="4">已收货
      </text>
    </div>
    <list
        class="pull-new-detail-list-container"
        @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell v-for="tbPullNewDetail in tbPullNewDetailList" v-bind:key="tbPullNewDetail.id">
        <div class="pull-new-detail">
          <div class="pull-new-detail-row border-b">
            <div class="pull-new-detail-cell">
              <text class="pull-new-detail-title">手机号</text>
              <text class="pull-new-detail-text">{{tbPullNewDetail.mobile}}</text>
            </div>
            <div class="pull-new-detail-cell">
              <text class="pull-new-detail-title">状态</text>
              <text :class="['pull-new-detail-text', getStatusStyle(tbPullNewDetail.status)]">{{tbPullNewDetail.statusTitle}}</text>
            </div>
          </div>
          <div class="pull-new-detail-row border-b">
            <div class="pull-new-detail-cell">
              <text class="pull-new-detail-title">激活</text>
              <text class="pull-new-detail-text">{{tbPullNewDetail.bindTime}}</text>
            </div>
            <div class="pull-new-detail-cell ">
              <text class="pull-new-detail-title">首购</text>
              <text class="pull-new-detail-text">{{tbPullNewDetail.buyTime}}</text>
            </div>
          </div>
          <div class="pull-new-detail-row">
            <div class="pull-new-detail-cell">
              <text class="pull-new-detail-title">结算</text>
              <text :class="['pull-new-detail-text', getSettledStyle(tbPullNewDetail)]">{{getSettledText(tbPullNewDetail)}}</text>
            </div>
            <div class="pull-new-detail-cell">
              <text class="pull-new-detail-title"></text>
              <text></text>
            </div>
          </div>
        </div>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" v-if="!tbPullNewDetailList.length  && !hasNext"></page-notice>
      </cell>
      <page-loading-more v-on:loadingMore="onLoadingMore" :loadingMore="loadingMore"
                         :shown="hasNext"></page-loading-more>
    </list>
    <wxc-popover ref="monthListPopover"
                 :buttons="monthListBtns"
                 :position="monthPopoverPos"
                 :arrowPosition="monthPopoverArrowPos"
                 @wxcPopoverButtonClicked="selectMonth"></wxc-popover>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .filterbar {
    flex-direction: row;
    justify-content: space-between;
    &-item {
      flex: 1;
      background-color: #ffffff;
      height: 80;
      line-height: 80;
      color: $color;
      font-size: 28;
      text-align: center;
      @include border-bottom(1, solid, #ddd);
      &-current {
        color: $color-primary;
        @include border-bottom(2, solid, $brand-primary);
      }
    }
  }

  .month-selector {
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
  }

  .month-btn {
    color: $color-warning;
    font-size: 40;
    margin: 0 20;
    width: 100;
    text-align: center;
  }

  .month {
    color: $color-warning;
    font-size: 40;
  }

  .month-list {
    height: 600;
    &-item {
      color: $color;
      font-size: 32;
      height: 40;
      line-height: 40;
      text-align: center;
      @include border-bottom(1, solid, #ddd);
    }
  }

  .border-b {
    @include border-bottom(1, solid, #ddd)
  }

  .pull-new-detail {
    margin-bottom: 10;
    background-color: #ffffff;
    padding: 20;
    &-row {
      flex-direction: row;
      height: 60;
    }
    &-cell {
      flex: 1;
      flex-direction: row;
      height: 60;
    }
    &-title {
      color: $color-muted;
      font-size: 28;
      height: 60;
      line-height: 60;
      width: 90;
    }
    &-text {
      color: $color;
      font-size: 28;
      height: 60;
      line-height: 60;
      flex: 1;
      margin-right: 20;
      text-overflow: ellipsis;
    }
  }
</style>
<script>

import {WxcPopover, WxcRichText, WxcTag} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')

let theme = require('./include/theme')
require('./include/page-xdom')
const DEFAULT_SEARCH_PARAM = {
  page: 1,
  status: '',
  year: '',
  month: ''
}
module.exports = {
  mixins: [
    require('./mixin/page-loading'),
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    'navbar': require('./components/navbar.vue'),
    WxcTag,
    WxcRichText,
    WxcPopover
  },
  data () {
    return {
      tbPullNewDetailList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      hasNext: true,
      searchParam: Object.assign({}, DEFAULT_SEARCH_PARAM),
      loading: false,
      statInfo: {},
      monthListBtns: [],
      monthSelectorShow: false,
      monthPopoverPos: {x: -10, y: 130},
      monthPopoverArrowPos: {pos: 'top', x: -15},
      year: '',
      month: '',
      monthShow: '全部月份',
      yStyle: {
        fontSize: 20,
        color: theme.color
      },
      valueStyle: {
        fontSize: 32,
        color: theme.color
      }
    }
  },
  created () {
    Deferred.when(this.loadData(), this.search()).always(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {
      return api.page.tbPullNewDetailList.data().done(rs => {
        this.statInfo = rs.data.statInfo
        this.year = rs.data.year
        this.month = rs.data.month
        this.buildMonthList(this.year, this.month)
      })
    },
    getStatusStyle (status) {
      switch (status) {
        case 1:
          return 'text-info'
        case 2:
          return 'text-primary'
        case 3:
          return 'text-warning'
        case 4:
          return 'text-success'
      }
    },
    getSettledStyle (detail) {
      switch (detail.status) {
        case 1:
          return 'text-info'
        case 4:
          return detail.settled ? 'text-success' : 'text-warning'
      }
    },
    getSettledText (detail) {
      switch (detail.status) {
        case 1:
          return '等待完成订单'
        case 4:
          return detail.settled ? '已结算' : '待结算'
      }
    },
    buildMonthList (year, month) {
      this.monthListBtns = [{
        text: '全部月份',
        key: '全部月份'
      }]
      var i = 0
      while (i < 12) {
        if (month === 0) {
          month = 12
          year--
        }
        this.monthListBtns.push({
          text: year + '年' + month + '月',
          key: year + '-' + month
        })
        if ((--month) === 0) {
          month = 12
          year--
        }
        i++
      }
    },
    resetSearchParam () {
      Object.assign(this.searchParam, DEFAULT_SEARCH_PARAM)
      this.hasNext = true
    },
    selectStatus (e) {
      this.resetSearchParam()
      this.searchParam.status = e.target.attr.status
      this.search()
    },
    search (append, callback) {
      // if(this.loading) {
      //   return new Deferred().resolve()
      // }
      this.loading = true
      return api.tbPullNewDetail.search(this.searchParam).done((rs) => {
        if (append) {
          this.tbPullNewDetailList = this.tbPullNewDetailList.concat(rs.data.results)
        } else {
          this.tbPullNewDetailList = rs.data.results
        }
        let paging = rs.data
        this.hasNext = paging.hasNext
      }).always(() => {
        this.loading = false
        callback && callback()
      })
    },
    onXRefresh (event) {
      this.searchParam.page = 1
      this.onRefresh(event, Deferred.when(this.search()))
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.search(true, () => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.tbPullNewDetailList)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    showMonthSelector () {
      this.$refs['monthListPopover'].wxcPopoverShow()
    },
    selectMonth (e) {
      var tmps
      if (e.key === '全部月份') {
        tmps = ['', '']
        this.monthShow = '全部月份'
      } else {
        tmps = e.key.split('-')
        this.monthShow = tmps[0] + '年' + tmps[1] + '月'
      }
      this.resetSearchParam()
      this.searchParam.year = tmps[0]
      this.searchParam.month = tmps[1]
      this.search()
    }
  }
}
</script>
